<details class="relative md:hidden" data-menu>
	<summary
		class="-m-2 cursor-pointer list-none p-2 transition hover:text-emerald-500"
	>
		<slot name="button" />
	</summary>
	<div
		class="absolute right-0 top-[calc(100%+8px)] z-10 max-h-[calc(100vh-5rem)] w-48 overflow-y-auto overflow-x-hidden rounded-lg bg-slate-800 shadow"
	>
		<slot />
	</div>
</details>

<script>
	for (const menu of document.querySelectorAll<HTMLDetailsElement>(
		"[data-menu]",
	)) {
		window.addEventListener("click", (event) => {
			if (!menu.contains(event.target as Node)) {
				menu.open = false
			}
		})
		menu.addEventListener("keydown", (event) => {
			if (event.key === "Escape") {
				menu.open = false
				menu.querySelector("summary")!.focus()
			}
		})
	}
</script>
